<template>
  <view class="min-h-[100vh] bg-gradient-to-br from-[#667eea] via-[#764ba2] to-[#f093fb]">
    <!-- 首行：位置、昵称、平台ID + 搜索栏 -->
    <view class="relative">
      <!-- 装饰性背景 -->
      <view class="absolute top-0 left-0 w-full h-[200rpx] bg-gradient-to-r from-[rgba(255,255,255,0.1)] to-[rgba(255,255,255,0.05)] rounded-b-[50rpx]"></view>
      
      <!-- 顶部信息栏 -->
      <view class="relative z-10 flex justify-between items-center px-[40rpx] py-[40rpx]">
        <view class="flex items-center">
          <view class="w-[8rpx] h-[32rpx] bg-white rounded-full mr-[15rpx] shadow-sm"></view>
          <text class="text-[32rpx] text-white font-bold">{{ currentCity }}</text>
        </view>
        <view class="flex items-center">
          <text class="text-[28rpx] text-white/90 mr-[15rpx]">{{ userInfo.nickname }}</text>
          <view class="px-[16rpx] py-[8rpx] bg-white/20 backdrop-blur-sm rounded-[20rpx] border border-white/30">
            <text class="text-[22rpx] text-white">{{ userInfo.platformId }}</text>
          </view>
        </view>
      </view>

      <!-- 搜索栏 -->
      <view class="relative z-10 px-[40rpx] pb-[40rpx]">
        <view class="relative bg-white/90 backdrop-blur-md rounded-[60rpx] flex items-center px-[35rpx] py-[25rpx] shadow-xl">
          <IconFont name="search" size="26" class="text-[#667eea] mr-[15rpx]"></IconFont>
          <input 
            type="text" 
            placeholder="搜索工作、技能、职位..." 
            class="flex-1 text-[28rpx] placeholder:text-[#94a3b8] bg-transparent h-[40rpx] focus:outline-none"
          />
          <view class="w-[50rpx] h-[50rpx] bg-gradient-to-r from-[#667eea] to-[#764ba2] rounded-full flex items-center justify-center shadow-lg">
            <IconFont name="scan" size="24" class="text-white"></IconFont>
          </view>
        </view>
      </view>
    </view>

    <!-- 第二位置：流动板块（广告轮播） -->
    <view class="mt-[20rpx] overflow-hidden shadow-2xl">
      <swiper 
        class="w-full h-[320rpx]" 
        autoplay 
        interval="4000" 
        circular 
        indicator-dots 
        indicator-color="rgba(255,255,255,0.3)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(banner, index) in adBanners" :key="index">
          <view class="relative w-full h-full">
            <image 
              :src="banner.imageUrl" 
              class="w-full h-full" 
              mode="aspectFill"
            />
            <view class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 第三位置：五大模块 -->
    <view class="mt-[60rpx]">
      <view class="text-center mx-[40rpx] mb-[40rpx]">
        <text class="text-[36rpx] font-bold text-white">服务中心</text>
        <view class="w-[80rpx] h-[6rpx] bg-white/80 rounded-full mt-[15rpx] mx-auto"></view>
      </view>
      
      <view class="grid grid-cols-3 gap-[12rpx] mb-[40rpx]">
        <view 
          v-for="(module, index) in serviceModules.slice(0, 5)" 
          :key="module.id"
          :class="index === 2 ? 'row-span-2' : ''"
          class="flex flex-col items-center justify-center p-[40rpx] bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/20 transition-all duration-300"
        >
          <view class="w-[100rpx] h-[100rpx] rounded-[25rpx] bg-white/90 flex items-center justify-center mb-[25rpx] shadow-lg">
            <image 
              :src="module.icon" 
              class="w-[60rpx] h-[60rpx]"
              mode="aspectFit"
            />
          </view>
          <text class="text-[28rpx] text-white font-semibold mb-[8rpx]">{{ module.title }}</text>
          <text class="text-[22rpx] text-white/70 text-center">{{ module.description }}</text>
        </view>
      </view>
      

    </view>

    <!-- 第四位置：部分悬赏显示 -->
    <view class="mx-[40rpx] mt-[60rpx]">
      <view class="flex justify-between items-center mb-[40rpx]">
        <view>
          <text class="text-[36rpx] font-bold text-white">热门悬赏</text>
          <view class="w-[80rpx] h-[6rpx] bg-white/80 rounded-full mt-[15rpx]"></view>
        </view>
        <view class="flex items-center px-[25rpx] py-[15rpx] bg-white/20 backdrop-blur-sm rounded-[50rpx] border border-white/30">
          <text class="text-[24rpx] text-white mr-[8rpx]">更多</text>
          <IconFont name="arrow-right" size="20" class="text-white"></IconFont>
        </view>
      </view>
      
      <view class="space-y-[25rpx]">
        <view 
          v-for="reward in rewardList" 
          :key="reward.id"
          class="flex items-center p-[35rpx] rounded-[25rpx] bg-white/90 backdrop-blur-md hover:bg-white transition-all duration-300 shadow-xl"
        >
          <view class="relative mr-[25rpx]">
            <image 
              :src="reward.avatar" 
              class="w-[90rpx] h-[90rpx] rounded-[20rpx]"
              mode="aspectFill"
            />
            <view class="absolute -top-[5rpx] -right-[5rpx] w-[20rpx] h-[20rpx] bg-[#10b981] rounded-full border-2 border-white"></view>
          </view>
          <view class="flex-1">
            <text class="text-[30rpx] text-[#1e293b] font-semibold block mb-[10rpx]">{{ reward.title }}</text>
            <text class="text-[24rpx] text-[#64748b] block mb-[15rpx] line-clamp-1">{{ reward.description }}</text>
            <view class="flex justify-between items-center">
              <view class="flex items-center">
                <text class="text-[34rpx] text-[#ef4444] font-bold mr-[15rpx]">¥{{ reward.price }}</text>
                <view class="px-[15rpx] py-[6rpx] bg-[#fee2e2] rounded-[15rpx]">
                  <text class="text-[20rpx] text-[#dc2626] font-medium">急需</text>
                </view>
              </view>
              <text class="text-[22rpx] text-[#94a3b8]">{{ reward.publishTime }}</text>
            </view>
          </view>
          <view class="w-[70rpx] h-[70rpx] rounded-full bg-gradient-to-r from-[#667eea] to-[#764ba2] flex items-center justify-center ml-[20rpx] shadow-lg">
            <IconFont name="arrow-right" size="24" class="text-white"></IconFont>
          </view>
        </view>
      </view>
    </view>

    <!-- 第五位置（最下方）：底部导航 -->
    <view class="mx-[40rpx] mt-[60rpx] mb-[60rpx]">
      <view class="text-center mb-[40rpx]">
        <text class="text-[36rpx] font-bold text-white">加入我们</text>
        <view class="w-[80rpx] h-[6rpx] bg-white/80 rounded-full mt-[15rpx] mx-auto"></view>
      </view>
      
      <view class="grid grid-cols-2 gap-[30rpx]">
        <view 
          v-for="item in bottomNavItems" 
          :key="item.id"
          class="flex flex-col items-center justify-center p-[45rpx] rounded-[25rpx] bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/20 transition-all duration-300"
        >
          <view class="w-[90rpx] h-[90rpx] rounded-[25rpx] bg-white/90 flex items-center justify-center mb-[25rpx] shadow-lg">
            <IconFont :name="item.icon" size="36" class="text-[#667eea]"></IconFont>
          </view>
          <text class="text-[26rpx] text-white font-semibold text-center leading-[1.3]">{{ item.title }}</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="h-[100rpx] bg-gradient-to-t from-black/10 to-transparent"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

// 当前城市
const currentCity = ref('北京')

// 用户信息
const userInfo = ref({
  nickname: '小明',
  platformId: 'ID123456'
})

// 广告横幅（改为轮播图）
const adBanners = ref([
  {
    imageUrl: 'https://picsum.photos/id/26/750/320'
  },
  {
    imageUrl: 'https://picsum.photos/id/28/750/320'
  },
  {
    imageUrl: 'https://picsum.photos/id/42/750/320'
  }
])

// 五大服务模块
const serviceModules = ref([
  {
    id: 1,
    title: '日结区',
    description: '订单制',
    icon: 'https://picsum.photos/id/1/100/100'
  },
  {
    id: 2,
    title: '悬赏区',
    description: '任务制',
    icon: 'https://picsum.photos/id/2/100/100'
  },
  {
    id: 3,
    title: '能力提升',
    description: '培训考证',
    icon: 'https://picsum.photos/id/3/100/100'
  },
  {
    id: 4,
    title: '工厂招聘',
    description: '长期稳定',
    icon: 'https://picsum.photos/id/4/100/100'
  },
  {
    id: 5,
    title: '特殊招聘',
    description: '灵活多样',
    icon: 'https://picsum.photos/id/5/100/100'
  }
])

// 悬赏列表
const rewardList = ref([
  {
    id: 1,
    title: '寻找失物',
    description: '在xx商场丢失钱包一个，内有重要证件',
    price: '200',
    publishTime: '2小时前',
    avatar: 'https://picsum.photos/id/20/100/100'
  },
  {
    id: 2,
    title: '代买跑腿',
    description: '帮忙代购生活用品，送到指定地点',
    price: '50',
    publishTime: '5小时前',
    avatar: 'https://picsum.photos/id/21/100/100'
  },
  {
    id: 3,
    title: '技术咨询',
    description: '需要专业技术人员解决设备故障',
    price: '300',
    publishTime: '1天前',
    avatar: 'https://picsum.photos/id/22/100/100'
  }
])

// 底部导航项
const bottomNavItems = ref([
  {
    id: 1,
    title: '成为平台商家',
    icon: 'shop'
  },
  {
    id: 2,
    title: '成为平台从业者',
    icon: 'user'
  },
  {
    id: 3,
    title: '信息中心',
    icon: 'notice'
  },
  {
    id: 4,
    title: '联系我们',
    icon: 'tel'
  }
])
</script>

<style scoped>
/* 轮播图指示器优化 */
::v-deep .wx-swiper-dot {
  width: 10rpx !important;
  height: 10rpx !important;
  margin: 0 5rpx !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

::v-deep .wx-swiper-dot-active {
  width: 28rpx !important;
  border-radius: 5rpx !important;
  background: #ffffff !important;
}

/* 全局美化 */
* {
  box-sizing: border-box;
}

/* 图片加载优化 */
image {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 输入框优化 */
input {
  outline: none;
  border: none;
  background: transparent;
}

input:focus {
  outline: none;
}

/* 玻璃拟态效果 */
.backdrop-blur-sm {
  backdrop-filter: blur(8rpx);
}

.backdrop-blur-md {
  backdrop-filter: blur(12rpx);
}

/* 悬浮效果 */
.hover\:bg-white\/20:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2rpx);
}

.hover\:bg-white:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-2rpx);
}

/* 渐变背景 */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, #667eea, #764ba2, #f093fb);
}

.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background: linear-gradient(to top, var(--tw-gradient-stops));
}

/* 文字截断 */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 间距工具类 */
.space-y-25 > * + * {
  margin-top: 25rpx;
}

/* 透明度工具类 */
.text-white\/90 {
  color: rgba(255, 255, 255, 0.9);
}

.text-white\/70 {
  color: rgba(255, 255, 255, 0.7);
}

.bg-white\/90 {
  background-color: rgba(255, 255, 255, 0.9);
}

.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}

.border-white\/30 {
  border-color: rgba(255, 255, 255, 0.3);
}

.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.8);
}

/* 动画优化 */
.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 阴影效果 */
.shadow-xl {
  box-shadow: 0 20rpx 25rpx -5rpx rgba(0, 0, 0, 0.1), 0 10rpx 10rpx -5rpx rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
  box-shadow: 0 25rpx 50rpx -12rpx rgba(0, 0, 0, 0.25);
}

.shadow-lg {
  box-shadow: 0 10rpx 15rpx -3rpx rgba(0, 0, 0, 0.1), 0 4rpx 6rpx -2rpx rgba(0, 0, 0, 0.05);
}

/* 行高优化 */
.leading-\[1\.3\] {
  line-height: 1.3;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 4rpx;
  height: 4rpx;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2rpx;
}

::-webkit-scrollbar-track {
  background: transparent;
}
</style>